<template>
	<view class="page_bg">
		<z-paging ref="paging" class="z-paging page_bg" :hide-loading-more-when-no-more-by-limit="5"
			v-model="courseList" @query="getMyCourseList">
			<!-- 			<view slot="top">
				<u-tabs-swiper style="margin-bottom: 10rpx;" ref="tabs" :list="list" :current="current"
					@change="tabsChange" :is-scroll="false"></u-tabs-swiper>
			</view> -->

			<view class="course-item" v-for="item in courseList" :key="item._id">
				<view class="top">
					<u-image :src="item.courseInfo.thumb" :lazy-load="true" mode="aspectFill"></u-image>
					<view class="flex-col group_3">
						<text class="text_1">{{item.courseInfo.title}}</text>
					</view>
				</view>
				<view class="justify-between section_2">
					<text class="total_num">共{{item.courseInfo.videos.length}}节课</text>
					<view class="flex-row" style="margin-right: 20rpx;" @click="changeShow(item.goods_id)">
						<block v-if="item.goods_id != nowShow">
							<text>展开</text>
							<image src="/static/remote/e59904ec4b1be1027d00c791c7c24b50.png" class="image_4" />
						</block>
						<block v-else>
							<text>收起</text>
							<image src="/static/remote/3fa21f52b56700718e98d311799e7873.png" class="image_4" />
						</block>
					</view>
					<view class="loading" v-if="loadState && item.goods_id == nowShow">
						<u-loading mode="circle"></u-loading>
					</view>
					<u-collapse event-type="close" :arrow="true" class="collapse"
						v-if="!loadState && item.goods_id == nowShow&&list[current].type=='course'">
						<u-collapse-item :index="index" :title="chapter.title" v-for="(chapter, index) in nowList"
							:key="chapter._id">
							<view class="collapse-item" v-if="chapter.videos.length > 0">
								<u-time-line>
									<u-time-line-item v-for="(video,index) in chapter.videos" :key="video._id">
										<template v-slot:node>
											<view class="u-node"></view>
										</template>
										<template v-slot:content style="position: relative;">
											<view @click="goVideo(item.goods_id,video._id)">
												<view>{{video.title}}</view>
												<view>{{timeFormat(video.duration)}}</view>
												<view class="study_status" v-if="vk.pubfn.isNull(video.watch_info)">
													未学习
												</view>
											</view>
										</template>
									</u-time-line-item>
								</u-time-line>
							</view>
							<view class="collapse-item" v-else>
								暂无视频
							</view>
						</u-collapse-item>
					</u-collapse>
					<view class="no_class" v-if="!loadState && item.goods_id == nowShow && nowList.length < 1">
						- 暂无课程 -
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				// 学习课程列表
				courseList: [],
				// 当前展示课程id
				nowShow: '',
				// 当前展示课程数据
				nowChapters: [], // 章节列表
				nowVideos: {}, // 音频列表
				nowList: [],
				list: [{
					name: '点播课程',
					type: 'course'
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项

				// 加载数据中
				loadState: false
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		computed: {
			showIcon() {
				return (chapter) => {
					if (chapter.videos.length == 0) return false
					for (let key in chapter.videos) {
						if (vk.pubfn.isNotNull(chapter.videos[key].watch_info)) return false
					}
					return true
				}
			}
		},
		methods: {
			// 时间转换
			tabsChange(index) {
				this.current = index;
				this.$refs.paging.reload();
			},
			timeFormat(s) {
				let day = Math.floor(s / (24 * 3600)); // Math.floor()向下取整
				let hour = Math.floor((s - day * 24 * 3600) / 3600);
				let minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
				let second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
				if (hour) {
					return hour + ":" + minute + ":" + second;
				} else {
					if (second < 10) {
						if (minute < 10) {
							return "0:0" + minute + ":" + second;
						} else {
							return "0:" + minute + ":" + second;
						}
					} else {
						return "0:" + minute + ":" + second;
					}
				}
			},
			// 页面数据初始化函数
			init(options) {},
			// 我的课程列表
			getMyCourseList(pageNo, pageSize) {
				vk.callFunction({
					url: 'client/learn/pub/myCourseList',
					data: {
						pageIndex: pageNo,
						pageSize: pageSize,
						need_user_info: true,
						type: this.list[this.current].type
					},
					success(data) {
						that.$refs.paging.complete(data.rows);
					}
				});
			},
			changeShow(id) {
				if (id == this.nowShow) {
					this.nowShow = ''
					this.nowChapters = []
					this.nowVideos = {}
					return
				}
				// 显示加载请求数据
				this.loadState = true
				this.nowShow = id
				uni.vk.callFunction({
					url: 'client/course/pub/only_course_detail',
					data: {
						_id: id,
						need_user_info: true,
						type: this.list[this.current].type
					},
					success(res) {
						that.nowChapters = res.data.chapters
						that.nowList = res.data.test
						that.loadState = false
					}
				})
			},


			// 视频跳转
			goVideo(cId, vId) {
				uni.vk.navigateTo(
					`/uni_modules/uce-course/pages/video/startWatchVideo?course_id=${cId}&video_id=${vId}`)
			},

			goVideo2(video) {
				console.log(video)
				if (video.end_time <= Date.now()) {
					vk.callFunction({
						url: 'client/liveCourse/kh/getHfRoomSign',
						title: '请求中...',
						data: {
							room_id: video.room_id
						},
						success: function(data) {
							vk.navigateTo('/pages/webview/webview?url=' + data.data + '&type=2');
						}
					});
				} else {
					vk.callFunction({
						url: 'client/liveCourse/kh/getGoRoomSign',
						title: '加载中...',
						data: {
							room_id: video.room_id,
							user_number: vk.getVuex('$user.userInfo').username,
							user_role: 2,
							user_name: vk.getVuex('$user.userInfo').nickname,
							user_avatar: vk.getVuex('$user.userInfo').avatar || ''
						},
						success(data) {
							let {
								room_id,
								user_number,
								user_name,
								user_role,
								user_avatar,
								sign
							} = data.data
							console.log(JSON.stringify(data))
							vk.navigateTo(
								`/pages/webview/webview?room_id=${room_id}&user_number=${user_number}&user_name=${user_name}&user_role=${user_role}&user_avatar=${user_avatar}&sign=${sign}` +
								'&type=3');

						}
					})

				}
			}

		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		padding: 32rpx 0 0;
	}

	.course-item {
		border-bottom: 1px solid #F0F0F0;
		padding: 0 20rpx 30rpx;
		margin-bottom: 30rpx;

		.top {
			display: flex;

			.u-image {
				width: 284rpx !important;
				height: 182rpx !important;
			}

			.group_3 {
				margin-left: 26rpx;
				margin-right: 7rpx;
				flex: 1 1 auto;

				.text_1 {
					color: rgb(51, 51, 51);
					font-size: 30rpx;
					line-height: 35rpx;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
			}
		}

		.section_2 {
			margin-right: 3rpx;
			padding: 28rpx 0 24rpx;
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			line-height: 34rpx;
			white-space: nowrap;
			background-color: rgb(245, 245, 245);
			border-radius: 12rpx;
			margin-top: 20rpx;
			flex-wrap: wrap;
			overflow: hidden;

			.total_num {
				font-weight: bold;
				font-size: 28rpx;
				margin-left: 20rpx;
			}

			.image_4 {
				margin: 8rpx 0 0 8rpx;
				width: 22rpx;
				height: 22rpx;
			}

			.loading {
				width: 100%;
				display: flex;
				justify-content: center;
				margin-top: 24rpx;
				border-top: 1px solid #FFFFFF;
				padding-top: 24rpx;
			}

			.collapse {
				width: 100%;
				margin-top: 24rpx;
				padding: 4rpx 0 0 20rpx;
				border-top: 1px solid #FFFFFF;

				.collapse-item {
					padding: 16rpx 40rpx 0;

					.u-node {
						width: 20rpx;
						height: 20rpx;
						background: #FFFFFF;
						border: 2rpx solid #FDD303;
						border-radius: 50%;
					}

					.study_status {
						width: 120rpx;
						border: 2rpx solid #333333;
						border-radius: 26rpx;
						position: absolute;
						text-align: center;
						font-size: 24rpx;
						font-weight: bold;
						line-height: 38rpx;
						color: #333333;
						top: 14rpx;
						right: 0;
						background-color: #FFFFFF;
					}
				}
			}

			.no_class {
				width: 100%;
				padding: 20rpx 0 0;
				text-align: center;
				color: #999;
			}
		}
	}

	/deep/ .study_status_all .u-collapse-head {
		position: relative;
	}

	/deep/ .study_status_all .u-collapse-head::after {
		content: '未学习';
		position: absolute;
		top: 18rpx;
		right: 90rpx;
		width: 120rpx;
		border: 2rpx solid #333333;
		border-radius: 26rpx;
		position: absolute;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		line-height: 38rpx;
		background-color: #FFFFFF;
	}
</style>